本来今晚是打算写篇源码分析文章的，不过感觉不在状态，所以决定来篇没有难度的翻译工作，碰巧到Reactjs官网温习一下React相关知识，结果很不幸发现官网的所有中文内容全部消失，想到Context部分本来就没有被翻译过，因此就它啦～
——译者注
文档源地址

React的最强大的一点就是在React组件之间很容易追踪数据流向。当你关注某一个组件时，你可以很容易地看到属性的传递可以让你的应用易于推理。

一般的，你想要在组件树中传递数据时没必要去手动的在每个层级之间进行传递属性。React的“context” 特性可以帮你实现。

Note:
Context是一个高级实验的特性。在未来的发布版本中这个API可能会改掉。
很多应用从来都不需要使用context。如果你是刚刚开始学习React，你可能都不想使用context。使用context可能会因为数据流清晰度的下降而让你的代码变的难以理解。这和在整个应用中通过全局变量传递state类似。
如果必须要用context, 请保守使用
抛开你是构建一个应用还是库，尝试将context的使用局限于小范围并且尽可能避免直接使用context的API，这样即使API改变了也很容易升级。

在树中自动传递信息

假定你有如下数据结构:

class Button extends React.Component { 
  render() { 
    return ( 
      <button style={{background: this.props.color}}>       
        {this.props.children}
      </button> ); 
  }
}

class Message extends React.Component { 
  render() { 
    return ( 
      <div> 
        {this.props.text} 
        <Button color={this.props.color}>Delete</Button>    
      </div> 
    ); 
  }
}

class MessageList extends React.Component { 
  render() { 
    const color = "purple";  
    const children = this.props.messages.map((message) =><Message text={message.text} color={color} /> 
    ); 
    return <div>{children}</div>; 
  }
}

在这个例子中，我们为了给Button添加颜色样式和信息而手动去传递属性。这个主题在你想要在整个子树上传递一些信息(如color)时会是一个很好的例子。使用context，我们可以在树中自动的传递它们：

class Button extends React.Component { 
  render() { 
    return ( 
      <button style={{background: this.context.color}}>
        {this.props.children} 
      </button> 
     ); 
  }
}

Button.contextTypes = { 
  color: React.PropTypes.string
};

class Message extends React.Component { 
  render() { 
    return ( 
      <div> 
        {this.props.text} <Button>Delete</Button>
      </div> 
    );
  }
}

class MessageList extends React.Component{
  getChildContext() {
    return {color: "purple"}; 
  } 
  render() { 
    const children = this.props.messages.map((message) => 
      <Message text={message.text} /> 
    ); 
    return <div>{children}</div>;   
  }
}

MessageList.childContextTypes = { 
  color: React.PropTypes.string
};

通过给MessageList(context的提供者)添加childContextTypes和getChildContext，React自动将信息信息传递下去而且子树中的任意组件(在这个例子中是Button)都可以通过定义contextTypes来接收它。
如果contextTypes没有被定义，context将会是一个空对象。

父子组件的耦合

Context也可以让你生成这样的API:

<Menu> 
  <MenuItem>aubergine</MenuItem>      
  <MenuItem>butternut squash</MenuItem>      
  <MenuItem>clementine</MenuItem>
</Menu>

翻译就此终止！！！因为已经没有继续翻下去的必要了
WTF，在翻译即将结束时，发现React 官网文档并非去掉了中文部分，只是出了点小插曲：

通过首页链接 http://reactjs.cn 进入后，点击顶栏的Docs后会进入中文的Getting Started。结果只有这一页是中文的……你在当前页面点击的所有链接都将是英文页面，这应该是网站的问题所在。如Context页面的url为：http://reactjs.cn/react/docs/context.html, 我们可以通过直接修改url的方式来链到中文文档的地址: 只需要在末尾加上-zh-CN即可，如： http://reactjs.cn/react/docs/context-zh-CN.html

不用谢，请叫我雷锋！！！还有，等啥时候官网正常了可别忘记提醒我呀～

内容目录

  1. 在树中自动传递信息
  2. 父子组件的耦合
donation